Hua：最近對(duì)網(wǎng)站輪播圖做了一些優(yōu)化，雖然它看似簡(jiǎn)單，但從用戶角度去思考，卻能得到有趣的體驗(yàn)。
輪播圖對(duì)于很多網(wǎng)站必不可少，它在有限空間展示更多內(nèi)容，并且可以利用炫目的切換效果吸引用戶，以下是一些知名網(wǎng)站截圖：

利用前端技術(shù)javascript制作輪播圖并不難，首先要實(shí)現(xiàn)3個(gè)基本功能：

1、圖片按照一定時(shí)間間隔循環(huán)播放；
2、數(shù)字導(dǎo)航隨圖片一起循環(huán)；
3、數(shù)字導(dǎo)航控制圖片展示；

大家可以點(diǎn)擊這里體驗(yàn)實(shí)現(xiàn)基本功能的輪播圖。
體驗(yàn)后是不是覺(jué)得不爽，比如鼠標(biāo)移進(jìn)圖片剛想看清楚細(xì)節(jié)時(shí)卻跳到下張，是的，這非常傷害用戶感情。如何解決，原理很簡(jiǎn)單，鼠標(biāo)移進(jìn)圖片暫停輪播，鼠標(biāo)移出恢復(fù)輪播。
雖然很多網(wǎng)站早已實(shí)現(xiàn)該功能，但是無(wú)一例外存在一個(gè)問(wèn)題——鼠標(biāo)移出圖片時(shí)，仍然需要等待幾秒鐘才會(huì)跳到下一張，這種體驗(yàn)合理嗎？從用戶角度，當(dāng)用戶看完后，鼠標(biāo)移出圖片，合理的邏輯應(yīng)該是立即跳到下張；從產(chǎn)品或者運(yùn)營(yíng)角度，他們也希望用戶能夠看到更多的廣告圖。

有些網(wǎng)站的輪播圖尺寸往往比較大，特別是電商網(wǎng)站，為了吸引用戶眼球，制造歡樂(lè)氣氛，這些都是合理的。但是輪播圖變大，其占據(jù)首屏的空間就會(huì)變大，當(dāng)用戶在頁(yè)面進(jìn)行操作時(shí)，可能會(huì)不小心滑過(guò)圖片，然后又滑出圖片，這個(gè)過(guò)程極為短暫，如果這時(shí)立即響應(yīng)對(duì)應(yīng)方法導(dǎo)致頁(yè)面發(fā)生或者不發(fā)生變化，會(huì)給用戶帶來(lái)困惑甚至不便。比如用戶在一段時(shí)間內(nèi)誤滑進(jìn)滑出輪播圖多次，導(dǎo)致輪播圖響應(yīng)暫停，一直停留在固定圖片上，這會(huì)讓用戶感覺(jué)輪播失效。

所以需要對(duì)這種情況給出容錯(cuò)機(jī)制，也就是延遲響應(yīng)，如果發(fā)現(xiàn)用戶只是瞬間移過(guò)，則不響應(yīng)，就像鼠標(biāo)從來(lái)沒(méi)有經(jīng)過(guò)圖片；當(dāng)鼠標(biāo)在圖片停留到一定時(shí)間，則認(rèn)為用戶的確是要看圖片，對(duì)應(yīng)方法才會(huì)響應(yīng)，這個(gè)延遲時(shí)間一般認(rèn)為不要低于200ms。

綜上所訴，要實(shí)現(xiàn)的增強(qiáng)體驗(yàn)功能有兩點(diǎn)：

4、鼠標(biāo)移上圖片暫停，移出圖片后立即跳到下張圖片并繼續(xù)輪播；
5、鼠標(biāo)經(jīng)過(guò)延遲響應(yīng)；

吐槽了那么多，來(lái)看看代碼，非前端同學(xué)可能會(huì)以為實(shí)現(xiàn)上述兩個(gè)功能要許多代碼，實(shí)際只有短短幾行：

雖然代碼不多，但還是有一些基本技巧，比如紅框處布爾值控制是延時(shí)功能關(guān)鍵。
寫(xiě)到這里，用戶體驗(yàn)貌似還算可以，那還有沒(méi)有優(yōu)化空間呢？！
中國(guó)的網(wǎng)速在世界上排名較后，甚至很多地方網(wǎng)速還在1M左右，提高低網(wǎng)速用戶體驗(yàn)同樣重要。按需加載輪播圖便是方法之一，當(dāng)跳到對(duì)應(yīng)圖片，才下載所需圖片，這是加快圖片顯示和節(jié)省流量的不二法則。但是任何事物都有兩面性，有利便有弊，看圖：

這應(yīng)該是經(jīng)?？吹降漠?huà)面，圖片加載過(guò)程暴露在用戶面前，這在低網(wǎng)速下尤為明顯。彌補(bǔ)這一缺陷的方法也很簡(jiǎn)單——圖片預(yù)加載并且在加載時(shí)給出等待圖標(biāo)提示，繼續(xù)看圖：

預(yù)加載可以使圖片一次性完整展示，而不會(huì)暴露加載過(guò)程，從而給用戶合理預(yù)期。
最后實(shí)現(xiàn)的兩個(gè)增強(qiáng)體驗(yàn)如下：

6、圖片按需加載；
7、圖片預(yù)加載并且在加載過(guò)程給出等待圖標(biāo)提示。
同學(xué)可以點(diǎn)擊這里體驗(yàn)增強(qiáng)版輪播圖效果。

利用前端技術(shù)驅(qū)動(dòng)用戶體驗(yàn)的文章較少，希望通過(guò)這篇文章給大家?guī)?lái)新的視角與思考，最終目的是希望用戶能有更好的體驗(yàn)。

原文地址：騰訊GDC
作者：Hua

 
================微信推薦================
想在手機(jī)上、被窩里獲取網(wǎng)頁(yè)設(shè)計(jì)教程、無(wú)線端設(shè)計(jì)經(jīng)驗(yàn)分享和各種意想不到的資源"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：